<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title><style type="text/css">
	<style>
		ul,input{margin: 0; padding:0;}
		ul{padding:20px; border:1px solid red;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oTxt = document.getElementById('txt1');
		var oBtn = document.getElementById('btn1');
		var oDel = document.getElementById('btn2')
		var oUl = document.getElementById('ul1');

		oBtn.onclick = function (){
			var oLi = document.createElement('li');
			var oCheck = document.createElement('input');
			var oSpan = document.createElement('span');

			oCheck.type = 'checkbox';
			oSpan.innerHTML = oTxt.value;

			if (oUl.children[0]) {
				oUl.insertBefore(oLi, oUl.children[0]);
			} else{
				oUl.appendChild(oLi);
			};

			oLi.appendChild(oCheck);
			oLi.appendChild(oSpan);

			oTxt.value = '';
		}

		oDel.onclick = function (){
			for (var i = 0; i < oUl.children.length; i++) {
				if(oUl.children[i].children[0].checked){
					oUl.removeChild(oUl.children[i]);
					i--;				//这个很重要！！！！！
				}
			};
			// if (oCheck.checked) {
			// 	oUl.removeChild(oCheck.parent)
			// };
		}
	}
	</script>
</head>
<body>
	<input id="txt1" type="text" />
	<input id="btn1" type="button" value="留言" />
	<input id="btn2" type="button" value="批量删除" />
	<ul id="ul1"></ul>
</body>
</html>